{{Template:SZPT-CHINA/head}}
<html>

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<!-- 适配 -->
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            mobilePage();
        } else {
            let mainClass = document.getElementById('main').classList;
            if (docWidth == 1680 || docWidth == 3584) { // 模拟大屏
                designWidth = docWidth;
                designHeight = docWidth / 28 * 9;
                mainClass.add('large');
                mainClass.remove('pc');
                largePage();
            } else {  // pc
                designWidth = 1920;
                designHeight = 900;
                mainClass.add('pc');
                mainClass.remove('large');
                refreshScale()
            }
        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }

    // 大屏页面
    function largePage() {
        clearScale();
        document.getElementById('main').style = 'display:flex'
        document.getElementsByClassName('mobile')[0].style = 'display:none'
        // 大屏 设置 rem 函数
        let designSize = 1680;
        setRem(designSize);
    }

    // 移动端页面
    function mobilePage() {
        // clearScale()
        // // 是移动设备 展示移动设备页
        // document.getElementById('main').style = 'display:none'
        // document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // // mobile 设置 rem 函数
        // let designSize = 750;
        // setRem(designSize);
        if (/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Mac|Android)/i.test(navigator.userAgent)) {
            if ((head = document.getElementsByTagName("head"), viewport = document.createElement("meta"),
                viewport.name = "viewport", viewport.content = "target-densitydpi=device-dpi, width=80px, user-scalable=no",
                head[head.length - 1].appendChild(viewport))) {

            }
        }

    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<script>

    window.onload = function () {
        testDiv = document.getElementById("bcbg");

        //loading
        setTimeout(function () {
            $("#loadingHome").hide();
            $("#loading").hide();
            $("#loaderDownId").hide();
        }, 1000);
        init();
        // setTimeout(function () {

        // }, 2000);
    }
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认
        $("#p1").attr("style", "height: 700px;width:700px;float: left;	transition: all 0.3s;	");
        $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;transition: all 0.3s;");

        var pNo = "height: 650px;width:650px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 650px;transition: all 0.3s;"
        var p = "height: 700px;width:700px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 650px;transition: all 0.3s;"
        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Attributions";
        });
    });
</script>
<script>
    function keyPic() {
        if ($("#p1").css("height") == '700px') {
            $("#p1").attr("style", "height: 650px;float: left;");
            $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");
        }
        if ($("#p2").css("height") == '700px') {
            $("#p2").attr("style", "height: 650px;float: left;");
            $("#bg2").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");
        }
        if ($("#p3").css("height") == '700px') {
            $("#p3").attr("style", "height: 650px;float: left;");
            $("#bg3").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");
        }
        if ($("#p4").css("height") == '700px') {
            $("#p4").attr("style", "height: 650px;float: left;");
            $("#bg4").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");
        }

    }
    function keyMain() {
        // $("#p1").animate({
        //     height: '700px',
        //     width: '650px'
        // }, 120);
        // $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");
    }
</script>

<body class="pc" id="main">
    <div id="loadingHome" class="loader">
        <img class="textCenter" src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div class="loaderdown" id="loaderDownId">

    </div>
    <div class="mainImg">
        <div>
            <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p1" src="https://2021.igem.org/wiki/images/f/f5/T--SZPT-CHINA--team-members2.0.png"
                    class="smallImg"></image>
            </div>
            <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                <image id="p2" src="https://2021.igem.org/wiki/images/b/b2/T--SZPT-CHINA--team-attributions2.0.png"
                    class="smallImg"></image>

            </div>
            <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p3" src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--team-collaborations2.0.png"
                    class="smallImg"></image>
            </div>
            <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p4" src="https://2021.igem.org/wiki/images/5/5a/T--SZPT-CHINA--team-partnership2.0.png"
                    class="smallImg"></image>
            </div>
        </div>
        <div style="z-index: 99;position: absolute;">
            <image src="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--team-members.png"
                style="margin-top: -50px;margin-left: 550px;"> </image>
        </div>
        <div style="margin-top: 50px;">
            <div id="m1" style="width: 500px;height: 650px;z-index: 9999;position: absolute;float:left;"></div>
            <div id="m2"
                style="width: 500px;height: 650px;z-index: 9999;position: absolute;float:left;margin-left: 24%;">
            </div>
            <div id="m3"
                style="width: 500px;height: 650px;z-index: 9999;position: absolute;float:left;margin-left: 49%;">
            </div>
            <div id="m4"
                style="width: 500px;height: 650px;z-index: 9999;position: absolute;float:left;margin-left: 74%;">
            </div>
        </div>
    </div>

    <div class="left" style="float:left">1
    </div>
    <div class="directory" style="float:left">2
    </div>
    <div class="content" style="float:left">3
    </div>
    <div class="right" style="float:right">4
    </div>
</body>
<style>
    .smallImg {
        height: 650px;
        float: left;
    }

    .mainImg {
        width: 1920px;
        height: 650px;
    }

    .left {
        height: 500px;
        width: 55px;
        background-color: #2588d4;
    }

    .right {
        height: 500px;
        width: 55px;
        background-color: #d44225;
    }
</style>

<!-- loading -->
<style>
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999999999999;
        background-color: #f8c8b2;
    }

    /* .loader img {
        position: relative;
        height: 650px;
        width: 650px;
        left: 40%;
        top: 300px;
    } */
    .textCenter {
        text-align: center;
    }

    .loaderdown {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 10000px;
        height: 200000px;
        z-index: 99999999;
        background-color: #f8c8b2;
    }
</style>

<!-- 适配 -->
<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        margin: 0px;
        transform: translate3d(0, 0, 0)
    }

    /* pc */
    .pc {
        width: 1920px;
        height: 1020px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* padding: 30px; */
    }

    .pc .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pc .bk {
        width: 450px;
        height: 650px;
        border: #000 solid 1px;
        margin-top: 30px;
    }

    .bk:first-child {
        margin-top: 0px;
    }

    .pc .big-bk {
        width: 850px;
        height: 550px;
        border: #000 solid 1px;
        margin: 30px 30px 0px 30px;
    }

    .big-bk:first-child {
        margin-top: 0px;
    }

    /* 移动端 */
    .mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile .bk {
        width: 6.9rem;
        height: 2rem;
        border: #000 solid 0.01rem;
        margin-top: 0.3rem;
    }

    /* 大屏 */
    .large {
        width: 16.2rem;
        height: 4.6rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.3rem;
    }

    .large .column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .large .bk {
        width: 4.5rem;
        height: 1.5rem;
        border: #000 solid 1px;
        margin-top: 0.3rem;
    }

    .large .big-bk {
        width: 6.5rem;
        height: 2.5rem;
        border: #000 solid 1px;
        margin: 0.3rem 0.3rem 0rem 0.3rem;
    }
</style>


</html>